<template>
  <div class="detail">
    <div>
      <a class="goback" @click="goBack()">返回</a>
      <div>
        <Banner :imgDatas="imgData" />
      </div>
      <div>
        <p>{{ infoData.product_name }}</p>
        <p>{{ infoData.product_detail }}</p>
      </div>
    </div>
    <div class="shoppCart">
      <button @click="addToCart()">加入购物车</button>
    </div>
  </div>
</template>

<script>
import Banner from "./banner";
import { getDetail } from "@/api/request";

export default {
  data() {
    return {
      id: "详情",
      imgData: [],
      infoData: [],
    };
  },
  // mounted() {
  //   //挂载完成
  //   this.DetailData(this.$route.params.id);
  //   this.$store.dispatch("HIDENAV"); //触发store中的隐藏
  // },
  // 也可执行(先加载再渲染html)
  created() {
    this.DetailData(this.$route.params.id);
    this.$store.dispatch("HIDENAV"); //触发store中的隐藏
  },
  destroyed() {
    //销毁
    this.$store.dispatch("NAVSHOW"); //触发store中的显示
  },
  components: {
    Banner,
  },
  methods: {
    DetailData(id) {
      getDetail({ mId: id }).then(
        (res) => {
          console.log(res);
          this.imgData = res.data[0];
          this.infoData = res.data[1][0];
        },
        (error) => {
          console.lor(error);
        }
      );
    },
    goBack() {
      this.$router.push("/home");
    },
    addToCart() {
      //添加到store
      this.$set(this.infoData, "count", 1); //商品的数量
      this.$store.dispatch("ADDCART", this.infoData);
      this.$router.push("/order"); //跳转
    },
  },
};
</script>

<style scoped>
</style>